<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;

        }
        .ipt{
            border: 0px;
            width: 50%;

        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;

        }

        .msg {
            color: gold;
        }

        .buttonContainer{
            text-align: center;
        }
    </style>

    <script>
        function checkUsername() {
            var usernameInput = document.getElementById("usernameInput")
            var username = usernameInput.value;
            var usernameRegex = /^[a-zA-Z0-9]{5,10}$/;
            
            var usernameMsg = document.getElementById("usernameMsg");
            if (! usernameRegex.test(username)) {
                usernameMsg.style.color = "red";
                usernameMsg.innerText = "须为5-10位字母或数字"
                return false;
            }

            // 格式正确通过后，继续校验用户名是否被占用
            var request = new XMLHttpRequest();
            // 回调函数，设置响应回来的信息如何处理
            /**
             * 存在的问题：
             *      1. 响应乱码问题
             *      2. 响应的信息格式不规范，处理方式不规范
             *          后端响应回来的信息应当有一个统一的格式，前后端共同遵守
             *          使用JSON字符串（为了不用自己拼接字符串，可以通过JackSon工具帮助我们通过对象来转换成JSON串）
             *          {
             *              // 举例：code:1成功，code:2失败...
             *              "code":"",      业务状态码，表示该请求是否成功，如果失败了，为什么失败（与报文的响应码区别）
             *              "message":"",   业务状态码的补充说明（描述）
             *              “data”: {}      本次响应的数据     成功/不成功，List<Schedule>
             *              ...,...
             *          }
             *      3. 如果校验不通过，无法阻止表单的提交
             *          未来使用VUE axios 和 promise解决
             */
            // 这里无法阻止表单提交，回调函数的return true和return false和原方法无关，因为已经执行完了，这里没必要深究解决
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    // console.log(request.responseText); // 此时是一个JSON串，需要将串转成对象
                    var result = JSON.parse(request.responseText);
                    if (result.code !== 200) {
                        usernameMsg.style.color = "red";
                        usernameMsg.innerText = "账号被占用"
                    } else {
                        usernameMsg.style.color = "green";
                        usernameMsg.innerText = "账号可用"
                    }
                }
            };
            // 设置请求方式和资源路径，发送资源请求
            request.open("GET", "/user/checkUsernameUsed?username=" + username);
            request.send(); // 后面的代码执行无意义，因为可能会被后端代码覆盖掉，这是回调函数的缺陷，未来使用VUE的axios promise解决

            // usernameMsg.style.color = "green";
            // usernameMsg.innerText = "账号可用"
            // return true;
        }

        function checkUserPwd() {
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            var userPwdRegex = /^[0-9]{6,9}$/;

            var userPwdMsg = document.getElementById("userPwdMsg");
            if (! userPwdRegex.test(userPwd)) {
                userPwdMsg.style.color = "red";
                userPwdMsg.innerText = "密码必须为6-9位数字"
                return false;
            }
            userPwdMsg.style.color = "green";
            userPwdMsg.innerText = "密码可用"
            return true;
        }

        function checkReUserPwd() {

            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            var reUserPwdInput = document.getElementById("reUserPwdInput")
            var reUserPwd = reUserPwdInput.value;

            var reUserPwdMsg = document.getElementById("reUserPwdMsg");

            if (userPwd !== reUserPwd) {
                reUserPwdMsg.style.color = "red";
                reUserPwdMsg.innerText = "两次密码输入不一致"
                return false;
            }
            reUserPwdMsg.style.color = "green";
            reUserPwdMsg.innerText = "两次密码输入一致"
            return true;
        }

        function checkForm() {
            flag1 = checkUsername();
            flag2 = checkUserPwd();
            flag3 = checkReUserPwd();
            return flag1 && flag2 && flag3;
        }
    </script>

</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请注册</h3>
<form method="post" action="/user/register" onsubmit="return checkForm()">
    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <td>请输入账号</td>
            <td>
                <input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()">
                <span id="usernameMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>请输入密码</td>
            <td>
                <input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()">
                <span id="userPwdMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>确认密码</td>
            <td>
                <input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()">
                <span id="reUserPwdMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td colspan="2" class="buttonContainer">
                <input class="btn1" type="submit" value="注册">
                <input class="btn1" type="reset" value="重置">
                <button class="btn1"><a  href="login.html">去登录</a></button>
            </td>
        </tr>
    </table>

</form>
</body>
</html>